<template>
	<div>
		<!-- 显示隐藏bar start -->
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.barChart)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<!-- 显示隐藏bar end -->
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="barSeries.name"></md-input>
				</md-field>


				<md-field>
					<label>{{getLangText(label.stack)}}</label>
					<md-input v-model="barSeries.stack"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.barWidth)}}</label>
					<md-input v-model="barSeries.barWidth"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.barGap)}}</label>
					<md-input v-model="barSeries.barGap"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.barCategoryGap)}}</label>
					<md-input v-model="barSeries.barCategoryGap"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.bar)+getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:barSeries.itemStyle.borderColor}"
							@click="showColorPicker('borderColor')"
						></span>
						{{barSeries.itemStyle.borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="barSeries.itemStyle.borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.bar)+getLangText(label.borderType)}}</label>
					<md-select v-model="barSeries.itemStyle.borderType">
						<md-option :key="item.en" :value="item.en" v-for="item in borderType">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<div class="md-body-1">{{getLangText(label.bar)+getLangText(label.barBorderRadius)}}</div>
				<div style="display:flex;">
					<md-field style="width:60px;">
						<label>{{getLangText(label.leftTop)}}</label>
						<md-input v-model="barSeries.itemStyle.barBorderRadius[0]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.rightTop)}}</label>
						<md-input v-model="barSeries.itemStyle.barBorderRadius[1]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.rightBottom)}}</label>
						<md-input v-model="barSeries.itemStyle.barBorderRadius[2]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.leftBottom)}}</label>
						<md-input v-model="barSeries.itemStyle.barBorderRadius[3]"></md-input>
					</md-field>
				</div>

				<md-field>
					<label>{{getLangText(label.bar)+getLangText(label.borderWidth)}}</label>
					<md-input v-model="barSeries.itemStyle.borderWidth"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.emphasis)+getLangText(label.bar)+getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:barSeries.emphasis.itemStyle.borderColor}"
							@click="showColorPicker('borderColorEmphasis')"
						></span>
						{{barSeries.emphasis.itemStyle.borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="barSeries.emphasis.itemStyle.borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColorEmphasis'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.emphasis)+getLangText(label.bar)+getLangText(label.borderType)}}</label>
					<md-select v-model="barSeries.emphasis.itemStyle.borderType">
						<md-option :key="item.en" :value="item.en" v-for="item in borderType">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<div
					class="md-body-1"
				>{{getLangText(label.emphasis)+getLangText(label.bar)+getLangText(label.barBorderRadius)}}</div>
				<div style="display:flex;">
					<md-field style="width:60px;">
						<label>{{getLangText(label.leftTop)}}</label>
						<md-input v-model="barSeries.emphasis.itemStyle.barBorderRadius[0]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.rightTop)}}</label>
						<md-input v-model="barSeries.emphasis.itemStyle.barBorderRadius[1]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.rightBottom)}}</label>
						<md-input v-model="barSeries.emphasis.itemStyle.barBorderRadius[2]"></md-input>
					</md-field>
					<md-field style="width:60px;margin-left:8px;">
						<label>{{getLangText(label.leftBottom)}}</label>
						<md-input v-model="barSeries.emphasis.itemStyle.barBorderRadius[3]"></md-input>
					</md-field>
				</div>

				<md-field>
					<label>{{getLangText(label.emphasis)+getLangText(label.bar)+getLangText(label.borderWidth)}}</label>
					<md-input v-model="barSeries.emphasis.itemStyle.borderWidth"></md-input>
				</md-field>
			</div>

			<label-style :lang-type="langType" :option="barSeries.label" @label-style-result="onLabelStyle"></label-style>
			<item-style :lang-type="langType" :option="barSeries.itemStyle" @item-style-result="onItemStyle"></item-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="barSeries.emphasis.label"
				@label-style-result="onLabelStyleEmphasis"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)"
				:option="barSeries.emphasis.itemStyle"
				@item-style-result="onItemStyleEmphasis"
			></item-style>

			<mark-point :lang-type="langType" :option="barSeries.markPoint" @mark-point-result="onMarkPoint"></mark-point>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.markPoint)"
				:option="barSeries.markPoint.label"
				@label-style-result="onLabelStyleMarkPoint"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.markPoint)"
				:option="barSeries.markPoint.itemStyle"
				@item-style-result="onItemStyleMarkPoint"
			></item-style>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)+getLangText(label.markPoint)"
				:option="barSeries.markPoint.emphasis.label"
				@label-style-result="onLabelStyleMarkPointEmphasis"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)+getLangText(label.markPoint)"
				:option="barSeries.markPoint.emphasis.itemStyle"
				@item-style-result="onItemStyleMarkPointEmphasis"
			></item-style>

			<mark-line :lang-type="langType" :option="barSeries.markLine" @mark-line-result="onMarkLine"></mark-line>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.markLine)"
				:option="barSeries.markLine.label"
				@label-style-result="onLabelStyleMarkLine"
			></label-style>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)+getLangText(label.markLine)"
				:option="barSeries.markLine.emphasis.label"
				@label-style-result="onLabelStyleMarkLineEmphasis"
			></label-style>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.markLine)"
				:option="barSeries.markLine.lineStyle"
				@line-style-result="onLineStyleMarkLine"
			></line-style>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.emphasis)+getLangText(label.markLine)"
				:option="barSeries.markLine.emphasis.lineStyle"
				@line-style-result="onLineStyleMarkLineEmphasis"
			></line-style>
		</div>
	</div>
</template>
<script>
	import LabelStyle from "@/components/comp/LabelStyle";
	import ItemStyle from "@/components/comp/ItemStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import MarkPoint from "@/components/comp/MarkPoint";
	import MarkLine from "@/components/comp/MarkLine";
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "BarSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"label-style": LabelStyle,
			"item-style": ItemStyle,
			"line-style": LineStyle,
			"color-picker": ColorPicker,
			"mark-point": MarkPoint,
			"mark-line": MarkLine
		},
		data: () => ({
			label: {
				barChart: { zh: "条形图", en: "barChart" },
				symbol: { zh: "标记图形", en: "symbol" },
				symbolSize: { zh: "标记大小", en: "symbolSize" },
				name: { zh: "系列名称", en: "name" },
				symbolRotate: { zh: "标记旋转", en: "symbolRotate" },
				showSymbol: { zh: "标记显示", en: "showSymbol" },
				showAllSymbol: { zh: "显示所有标记", en: "showAllSymbol" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				stack: { zh: "数据堆叠", en: "stack" },
				step: { zh: "阶梯线图", en: "step" },
				smooth: { zh: "平滑曲线", en: "smooth" },
				label: { zh: "标签", en: "label " },
				position: { zh: "位置", en: "position" },
				distance: { zh: "与图形距离", en: "distance" },
				rotate: { zh: "旋转", en: "rotate" },
				formatter: { zh: "模板", en: "formatter" },
				emphasis: { zh: "强调", en: "emphasis" },
				markPoint: { zh: "标注点", en: "MarkPoint" },
				markLine: { zh: "标注线", en: "markLine" },
				barWidth: { zh: "柱条宽度", en: "barWidth" },
				bar: { zh: "柱条", en: "bar " },
				barGap: { zh: "柱间距离", en: "barGap" },
				barCategoryGap: { zh: "类目间距", en: "barCategoryGap" },
				borderColor: { zh: "边框颜色", en: "BorderColor" },
				borderWidth: { zh: "边框线宽", en: "BorderWidth" },
				borderType: { zh: "边框类型", en: "BorderType" },
				barBorderRadius: { zh: "圆角半径", en: "BorderRadius" },
				leftTop: { zh: "左上", en: "leftTop" },
				rightTop: { zh: "右上", en: "rightTop" },
				rightBottom: { zh: "右下", en: "rightBottom" },
				leftBottom: { zh: "左下", en: "leftBottom" }
			},
			isShow: false,
			//条形图系列
			barSeries: {
				type: "bar",
				name: "",
				barWidth: "auto",
				// barMaxWidth:'',
				// barMinHeight:0,
				barGap: "30%",
				barCategoryGap: "20%",
				stack: "",

				label: {},
				itemStyle: {
					borderColor: "#000",
					borderWidth: 0,
					borderType: "solid",
					barBorderRadius: [0, 0, 0, 0]
				},

				emphasis: {
					label: {},
					itemStyle: {
						borderColor: "#000",
						borderWidth: 0,
						borderType: "solid",
						barBorderRadius: [0, 0, 0, 0]
					}
				},
				markPoint: {
					data: [],
					label: {},
					itemStyle: {},
					emphasis: {
						label: {},
						itemStyle: {}
					}
				},
				markLine: {
					data: [],
					label: {},
					lineStyle: {},
					emphasis: {
						label: {},
						lineStyle: {}
					}
				}
			},
			//标签位置
			labelPosition: [
				{ zh: "上侧", en: "top" },
				{ zh: "左侧", en: "left" },
				{ zh: "右侧", en: "right" },
				{ zh: "下侧", en: "bottom" },
				{ zh: "内部", en: "inside" },
				{ zh: "内左", en: "insideLeft" },
				{ zh: "内右", en: "insideRight" },
				{ zh: "内上", en: "insideTop" },
				{ zh: "内下", en: "insideBottom" },
				{ zh: "内上左", en: "insideTopLeft" },
				{ zh: "内下左", en: "insideBottomLeft" },
				{ zh: "内上右", en: "insideTopRight" },
				{ zh: "内下右", en: "insideBottomRight" }
			],
			//是否显示
			showList: [
				{ zh: "自动", en: "auto" },
				{ zh: "是", en: true },
				{ zh: "否", en: false }
			],
			//描边样式
			borderType: [
				{ zh: "实线", en: "solid" },
				{ zh: "虚线", en: "dashed" },
				{ zh: "点线", en: "dotted" }
			],
			//颜色选择器
			picker: {
				show: false,
				current: ""
			},
			originOption:'',
			isParse:false
		}),

		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				}
			},
			barSeries:{
            deep:true,
            handler(){
			   if(this.isShow&&!this.isParse)
			   this.$emit("series-result", JSON.parse(JSON.stringify(this.barSeries)));
            }
        }
		},
		methods: {
			//显示颜色选择器
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			//颜色选择结果
			onColorPicker(op) {
				if (this.picker.current) 
				if (this.picker.current == "borderColor") {
					this.barSeries.itemStyle.borderColor = op.rgba;
				} else if (this.picker.current == "borderColorEmphasis") {
					this.barSeries.emphasis.itemStyle.borderColor = op.rgba;
				}
			},
			onMarkPoint(result) {
				for (var key in result) {
					this.barSeries.markPoint[key] = result[key];
				}
			},
			onMarkLine(result) {
				for (var key in result) {
					this.barSeries.markLine[key] = result[key];
				}
			},

			onLabelStyle(result) {
				this.barSeries.label = result;
			},
			onItemStyle(result) {
				this.barSeries.itemStyle = result;
			},
			onLabelStyleMarkLine(result) {
				this.barSeries.markLine.label = result;
			},
			onLabelStyleMarkLineEmphasis(result) {
				this.barSeries.markLine.emphasis.label = result;
			},
			onLabelStyleEmphasis(result) {
				this.barSeries.emphasis.label = result;
			},
			onItemStyleEmphasis(result) {
				this.barSeries.emphasis.itemStyle = result;
			},
			onLabelStyleMarkPoint(result) {
				this.barSeries.markPoint.label = result;
			},
			onItemStyleMarkPoint(result) {
				this.barSeries.markPoint.itemStyle = result;
			},
			onLabelStyleMarkPointEmphasis(result) {
				this.barSeries.markPoint.emphasis.label = result;
			},
			onItemStyleMarkPointEmphasis(result) {
				this.barSeries.markPoint.emphasis.itemStyle = result;
			},
			onLineStyleMarkLine(result) {
				this.barSeries.markLine.label = result;
			},
			onLineStyleMarkLineEmphasis(result) {
				this.barSeries.markLine.emphasis.label = result;
			},
			//设置结果
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.barSeries)));
				}
			},
			//解析option
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				if (this.option instanceof Object) {
					this.isParse=true;
					for (var key in this.option) {
						if (key == "itemStyle") {
							for (var k in this.option[key]) {
								this.barSeries[key][k] = this.option[key][k];
							}

							if (!("borderColor" in this.option[key])) {
								this.barSeries.itemStyle.borderColor = "#000";
							}
							if (!("borderWidth" in this.option[key])) {
								this.barSeries.itemStyle.borderWidth = 0;
							}
							if (!("borderType" in this.option[key]) ){
								this.barSeries.itemStyle.borderType = "solid";
							}
							if (!("barBorderRadius" in this.option[key]) ){
								this.barSeries.itemStyle.barBorderRadius = [0, 0, 0, 0];
							} else if (
								"barBorderRadius" in this.option[key] &&
								this.option[key].barBorderRadius instanceof Array
							) {
								this.barSeries.itemStyle.barBorderRadius = this.option[
									key
								].barBorderRadius;
							} else if (
								"barBorderRadius" in this.option[key] &&
								this.option[key].barBorderRadius instanceof Number
							) {
								var r = this.option[key].barBorderRadius;
								this.barSeries.itemStyle.barBorderRadius = [r, r, r, r];
							}
							console.log(this.option.itemStyle)
						} else if (key == "emphasis") {
							for (var k in this.option[key]) {
								this.barSeries.emphasis[k] = this.option.emphasis[k];
							}
							if (!("itemStyle" in this.option.emphasis)){
								this.barSeries.emphasis['itemStyle'] = {
									borderColor: "#000",
									borderWidth: 0,
									borderType: "solid",
									barBorderRadius: [0, 0, 0, 0]
								};
							} else {
								
								for (var k in this.option[key].itemStyle) {
									this.barSeries[key].itemStyle[k] = this.option[key].itemStyle[k];
								}
								if (!("borderColor" in this.option[key].itemStyle) ){
									this.barSeries.emphasis.itemStyle['borderColor'] = "#000";
								}
								if (!("borderWidth" in this.option[key].itemStyle)) {
									this.barSeries.emphasis.itemStyle['borderWidth'] = 0;
								}
								if (!("borderType" in this.option[key].itemStyle) ){
									this.barSeries.emphasis.itemStyle['borderType'] = "solid";
								}
								if (!("barBorderRadius" in this.option[key].itemStyle)) {
									this.barSeries.emphasis.itemStyle['barBorderRadius'] = [0, 0, 0, 0];
								} else if (
									"barBorderRadius" in this.option[key].itemStyle &&
									this.option[key].itemStyle.barBorderRadius instanceof Array
								) {
									this.barSeries.emphasis.itemStyle['barBorderRadius'] = this.option.emphasis.itemStyle.barBorderRadius;
								} else if (
									"barBorderRadius" in this.option.emphasis.itemStyle &&
									this.option.emphasis.itemStyle.barBorderRadius instanceof Number
								) {
									var r = this.option.emphasis.itemStyle['barBorderRadius'];
									this.barSeries.emphasis.itemStyle['barBorderRadius'] = [r, r, r, r];
								}
							}
							
						} else {
							this.barSeries[key] = this.option[key];
						}

					}
					if ("itemStyle" in this.option) {
								this.barSeries.itemStyle = {
									borderColor: "#000",
									borderWidth: 0,
									borderType: "solid",
									barBorderRadius: [0, 0, 0, 0]
								};
							}
							this.originOption=JSON.stringify(this.barSeries);
							var that=this;
							setTimeout(() => {
								that.isParse=false;
							}, 100);
				}
			},
			//隐藏并保存设置
			colseOption() {
				this.isShow = false;
				if (this.originOption!=JSON.stringify(this.barSeries)) {					
					this.$emit("series-result", this.barSeries);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
